<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
<div id="app">

    <div class="header">
        <p>社团管理系统</p>
        <p>club system</p>
    </div>
    <div class="formBody">
        <div class="leftImg"></div>
        <form id="loginForm" class="bb">
            <div class="form-group">
                <input type="text" class="form-control" id="txtUserName" name="studentId" placeholder="请输入用户名">
                <span class="error">{{nameError}}</span>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="txtPassword" name="password" placeholder="请输入密码">
                <span class="error">{{pwdError}}</span>
            </div>
            <div class="form-group">
                <div class="captcha-container">
                    <div id="captcha" class="captcha"></div>
                    <button id="refreshCaptcha" class="refresh-btn" color="blue">刷新</button>
                </div>
                <input type="text" class="form-control" id="txtCode" name="code" placeholder="请输入验证码">

<!--                <img src="code" @click="refreshCode()" id="code">-->
                <div class="error">{{codeError}}</div>
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="chkSave">
                <label class="form-check-label" for="chkSave">记住用户名</label>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-primary" @click="login()" :disabled="isSubmitting">登 录</button>
                <button type="button" class="btn btn-primary" id="btnForgeten">忘记密码</button>
                <a class="btn btn-primary" href="regist.html">注册</a>
            </div>
        </form>
    </div>
</div>

<style>
    .refresh-btn {
        margin-left: 100px;
        margin-top: -20px;
        float: left;
    }
    .header {
        width: 500px;
        margin: auto;
        transform: translateX(100px);
    }
    .header p {
        font-size: 50px;
        color: brown;
    }
    .formBody {
        width: 1100px;
    }
    .leftImg {
        width: 576px;
        height: 353px;
        float: left;
        background-image: url("img/img.png");
    }
    .bb {
        width: 500px;
        margin-top: 100px;
        float: right;
    }
</style>

<script>
    $(function() {
        let app = new Vue({
            el: "#app",
            data: {
                studentId: "",
                password: "", // 确保只定义一次
                nameError: "",
                pwdError: "",
                codeError: "",
                isSubmitting: false // 添加一个标志位来控制按钮状态
            },
            methods: {
                login() {
                    if (this.isSubmitting) return;

                    this.isSubmitting = true;

                    // 获取表单数据
                    const studentId = $("#txtUserName").val();
                    const password = $("#txtPassword").val();

                    console.log(`Student ID: ${studentId}, Password: ${password}`);

                    $.ajax({
                        url: `student/${encodeURIComponent(studentId)}/${encodeURIComponent(password)}`, // 使用 studentId 构建URL路径
                        type: "POST", // 改为POST方法以提高安全性
                        data: { password: password }, // 正确传递 password 参数
                        dataType: "json",
                        success: function(response) {
                            console.log(response);
                            if (response.state === 200) {
                                // 登录成功，跳转页面至首页
                                location.href = "index.html";
                            } else {
                                // 登录失败，显示错误信息
                                app.nameError = response.data && response.data.nameError || "";
                                app.pwdError = response.data && response.data.pwdError || "";
                                app.codeError = response.data && response.data.codeError || "";
                            }
                        }
                    });
                },
                // 刷新验证码
                refreshCode() {
                    console.log("刷新了验证码");
                    $("#code").attr("src", "code?time=" + new Date().getTime());
                }
            }
        });

        $("#btnForgeten").click(function() {
            location.href = "findpassword.html";
        });
    });
    function generateCaptcha() {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let captcha = '';
        for (let i = 0; i < 4; i++) {
            const randomIndex = Math.floor(Math.random() * chars.length);
            captcha += chars[randomIndex];
        }
        return captcha;
    }

    function updateCaptchaDisplay() {
        const captchaElement = document.getElementById('captcha');
        captchaElement.textContent = generateCaptcha();
    }

    // 页面加载时初始化验证码
    window.onload = function () {
        updateCaptchaDisplay();
    };

    // 添加点击事件监听器到刷新按钮
    document.getElementById('refreshCaptcha').addEventListener('click', updateCaptchaDisplay);
</script>
</body>
</html>